<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-row items-center">
				<image @click="gobacks" class="image" src="/static/dazi/bak.png" mode=""></image>

				<text class="text ml-13">详情</text>
			</view>
			<view class="mt-28 flex-col">
				<view class="flex-row justify-between">
					<view class="flex-row items-center">
						<image class="image_2" @click.stop="godeinfo"
							src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=dd0eea012a8ae34b33342315b7ab8fb4.png" />
						<view class="flex-col ml-13">
							<view class="flex-row items-center">
								<text class="font" @click.stop="godeinfo">杨紫夏</text>
								<image class="ml-12 image_4"
									src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=7832a7e4f52c3f46859c9c3600d548aa.png" />
							</view>
							<view class="group_2 mt-9">
								<text class="font_2">2025/2/17 19:45 ·</text>
								<text class="font_3 text_2">123</text>
								<text class="font_2">查看</text>
							</view>
						</view>
					</view>
					<image class="self-start image_3"
						src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=d84b1abafcbb6d91acb333aa64ba7304.png" />
				</view>
				<view class="flex-col group_3">
					<text class="self-stretch font_4 text_3">
						荐傀。豫茂绪鹅鉴澳拧改玉匝握戒指新休沟月喘等酱弊猫隆愁誉裁疾告笼车蠢实症抚析匠垫彪骚哼号宪屏宝蠕灸微带幕涛雹汉舵浊穷靠颂波姓庆画绳拾、磷奴楼都癌浦使吹捕倍诫磺接顷达隙扼烫服意蓝帽添挑？
					</text>
					<view class="">
						<image class="mt-12 self-start image_5"
							src="/static/assets/082ca53ffbb26b742c57ba875c26e216.png" />
						<view class="cojms">
							<image class='chusg' src="/static/acti/2.webp" mode=""></image>
							<image class='chusg' src="/static/acti/2.webp" mode=""></image>
							<image class='chusg' src="/static/acti/2.webp" mode=""></image>
							<image class='chusg' src="/static/acti/2.webp" mode=""></image>
						</view>
					</view>

				</view>
				<view class="flex-row items-center group_4">
					<image class="image"
						src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=4759f95e19d21d0435f9aee738d6a264.png" />
					<text class="ml-6 font_4 text_4">12km</text>
				</view>
				<view class="flex-row items-center group_5">
					<image class="image"
						src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=7bee352168bdb03a80caf00dc17888db.png" />
					<view class="flex-col justify-start items-start relative group_6 ml-11">
						<image class="image_6"
							src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=c2fe83c2293635259e8552e4bf084c60.png" />
						<image class="image_6 pos"
							src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=decf1a327d245998fe79d831f2367c59.png" />
						<image class="image_6 pos_2"
							src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=a05b4feb8238bb128b59a5bc8703230b.png" />
						<image class="image_6 pos_3"
							src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=85b023ec55f7020babd3ca38e287131e.png" />
						<image class="image_7 pos_4"
							src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=2e23612a583830f183998a2f58ad8556.png" />
						<view class="flex-col justify-start items-center text-wrapper pos_5">
							<text class="font_3 text_5">12</text>
						</view>
					</view>
				</view>
				<view class="divider"></view>
				<view class="flex-row justify-between group_7">
					<view class="flex-row items-center">
						<image class="image_8"
							src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=b87848e926e13b834c6dd78cce66fab5.png" />
						<view class="ml-12 flex-col items-center">
							<text class="font text_6">Wade Warren</text>
							<text class="font_4 text_8 mt-15">in McDonald's？</text>
						</view>
					</view>
					<text class="self-start font_2 text_7">2025/2/18 21:27</text>
				</view>
				<view class="flex-row justify-between group_8">
					<view class="flex-col self-stretch">
						<view class="flex-row self-stretch">
							<image class="shrink-0 self-start image_9"
								src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=938c2a2e34f8d60dd32f7a91f6e7777f.png" />
							<image class="ml-8 shrink-0 self-center image_10"
								src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=b8b2c98c6c4c9491bd007c06e0fa5194.png" />
							<text class="ml-8 self-center font">杨紫夏</text>
						</view>
						<text class="mt-4 self-end font_4 text_10">nope</text>
					</view>
					<text class="self-start font_2 text_9">2025/2/18 21:27</text>
				</view>
				<view class="flex-col group_9">
					<view class="flex-row justify-between">
						<view class="flex-row items-center">
							<image class="image_11"
								src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=8010b534c38aee6d3a100aaedf4e6820.png" />
							<view class="flex-col items-start ml-13">
								<text class="font text_11">黄南藏族吴彦祖</text>
								<text class="mt-12 font_5 text_13">太好看啦！</text>
							</view>
						</view>
						<text class="self-start font_2 text_12">2025/2/18 22:45</text>
					</view>

				</view>
			</view>
		</view>
		<view class="mt-16 flex-row equal-division">
			<view class="flex-row justify-center items-center group_10 equal-division-item">
				<image class="image"
					src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=e5476ffd30038bc240a5a6e899dfd16f.png" />
				<text class="font_5 text_17 ml-5">已赞</text>
			</view>
			<view class="flex-row justify-center items-center group_10 equal-division-item ml-7">
				<image class="image"
					src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=d8d64477ef9ff55e75d00149f1c176e9.png" />
				<text class="font_6 ml-5">评论</text>
			</view>
			<view class="flex-row justify-center items-center group_10 equal-division-item ml-7" @click="opdesau">
				<image class="image"
					src="https://ide.code.fun/api/image?token=67bed2394ae84d0012275ff7&name=b6c0bc54b01b5203baba7f8ae73a02dd.png" />
				<text class="font_6 ml-5">打赏</text>
			</view>
		</view>


		<up-overlay :show="showwer" @click="showwer = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="showwer" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					打赏
				</view>

				<view class="nsseme">
					<image src="/static/dazi/xg.png" mode=""></image>
					<view class="namsxh">
						我的名字
					</view>
				</view>

				<view class="iosld">
					<input type="text" placeholder="打赏数量" placeholder-class="co" v-model="txedipa" />

				</view>

				<view class="cojsh">
					<image src="/static/dazi/Diamond.png" mode=""></image>
					<view class="hsye">
						123456
					</view>
				</view>

				<view class="busnd btnact ash">
					确认打赏
				</view>



			</view>
		</up-overlay>

	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				showwer: false,
			};
		},

		methods: {
			// 个人动态详情
			godeinfo(){
				uni.navigateTo({
					url:'/pages/newtreds/myInfodel'
				})
			},
			gobacks() {
			
				// #ifdef H5
				history.back();
				// #endif
			
				// #ifdef APP
				uni.navigateBack()
				// #endif
			
			},
			
			opdesau(){
				this.showwer = true
				
			},
			
		},
	};
</script>

<style scoped lang="scss">
	.nsseme {
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			margin: 30rpx 0 10rpx;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}

		.namsxh {
			color: #fb75d6;
			font-size: 32rpx;
		}
	}

	.cojsh {
		display: flex;
		align-items: center;
		justify-content: center;

		.hsye {
			color: #2A222F;
			font-size: 24rpx;
		}

		image {
			margin-right: 10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);

	}

	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}


	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.iosld {
		margin: 50rpx 0;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;

		}

		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}

			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}

	}


	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.seacus {
		display: flex;
		align-items: center;
	}

	.z1 {
		color: rgba(251, 117, 214, 1) !important;
	}

	.serins {
		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
		}
	}

	.isehd {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.btnact {
		background-color: #fb75d6 !important;
	}

	.ash {
		margin-top: 30rpx !important;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.pouper {
		background-color: #fff;
		width: 640rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}


	.cojms {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 创建3列，每列宽度相同 */
		grid-auto-rows: minmax(50px, auto);
		/* 设置行高，根据需要调整 */
		gap: 10px;

		/* 可选：设置网格项之间的间距 */
		.chusg {
			width: 200rpx !important;
			height: 200rpx !important;
			border-radius: 24rpx;
		}
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		padding: 112rpx 0 68rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 0 40rpx;
	}

	.image {
		width: 48rpx;
		height: 48rpx;
	}

	.text {
		color: #2a222f;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 37.12rpx;
	}

	.image_2 {
		border-radius: 64rpx;
		width: 96rpx;
		height: 96rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 29.4rpx;
		font-weight: 700;
		color: #2a222f;
	}

	.image_4 {
		width: 36rpx;
		height: 36rpx;
	}

	.group_2 {
		line-height: 22.08rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.08rpx;
		color: #837386;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 17.48rpx;
		font-weight: 700;
	}

	.text_2 {
		color: #2a222f;
		line-height: 17.8rpx;
	}

	.image_3 {
		width: 44rpx;
		height: 44rpx;
	}

	.group_3 {
		margin-right: 28rpx;
		margin-top: 24rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 22.08rpx;
		color: #2a222f;
	}

	.text_3 {
		line-height: 40rpx;
	}

	.image_5 {
		border-radius: 32rpx;
		width: 496rpx;
		height: 580rpx;
	}

	.group_4 {
		margin-top: 24rpx;
	}

	.text_4 {
		color: #c2afc3;
		line-height: 20.38rpx;
	}

	.group_5 {
		margin-top: 38rpx;
	}

	.group_6 {
		width: 328rpx;
	}

	.image_6 {
		border-radius: 50%;
		width: 68rpx;
		height: 68rpx;
	}

	.pos {
		position: absolute;
		left: 52rpx;
		bottom: 0;
	}

	.pos_2 {
		position: absolute;
		left: 104rpx;
		bottom: 0;
	}

	.pos_3 {
		position: absolute;
		right: 104rpx;
		bottom: 0;
	}

	.image_7 {
		border-radius: 80rpx;
		width: 68rpx;
		height: 68rpx;
	}

	.pos_4 {
		position: absolute;
		right: 52rpx;
		bottom: 0;
	}

	.text-wrapper {
		padding: 20rpx 0;
		background-color: #837386;
		border-radius: 50%;
		width: 68rpx;
		border-left: solid 4rpx #ffffff;
		border-right: solid 4rpx #ffffff;
		border-top: solid 4rpx #ffffff;
		border-bottom: solid 4rpx #ffffff;
	}

	.pos_5 {
		position: absolute;
		right: 0;
		top: 0;
	}

	.text_5 {
		color: #ffffff;
	}

	.divider {
		margin-top: 36rpx;
		background-color: #f7eff8;
		height: 2rpx;
	}

	.group_7 {
		margin-top: 40rpx;
	}

	.image_8 {
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
	}

	.text_6 {
		line-height: 23.74rpx;
	}

	.text_8 {
		line-height: 20.78rpx;
	}

	.text_7 {
		margin-right: 20rpx;
		margin-top: 12rpx;
	}

	.group_8 {
		margin-top: 16rpx;
		padding-left: 48rpx;
		padding-right: 16rpx;
	}

	.image_9 {
		width: 56rpx;
		height: 46rpx;
	}

	.image_10 {
		border-radius: 64rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.text_10 {
		margin-right: 32rpx;
		line-height: 20.42rpx;
	}

	.text_9 {
		margin-top: 20rpx;
	}

	.group_9 {
		margin-top: 44rpx;
	}

	.image_11 {
		border-radius: 80rpx;
		width: 96rpx;
		height: 96rpx;
	}

	.text_11 {
		line-height: 30.28rpx;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25.68rpx;
		color: #2a222f;
	}

	.text_13 {
		line-height: 26.1rpx;
	}

	.text_12 {
		margin-right: 12rpx;
		margin-top: 12rpx;
	}

	.text_14 {
		line-height: 30.28rpx;
	}

	.text_16 {
		line-height: 26.1rpx;
	}

	.text_15 {
		margin-right: 12rpx;
		margin-top: 12rpx;
	}

	.equal-division {
		padding: 22rpx 0;
		background-color: #ffffff;
	}

	.group_10 {
		flex: 1 1 240.72rpx;
	}

	.equal-division-item {
		padding: 8rpx 0;
	}

	.text_17 {
		color: #fb75d6;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25.68rpx;
		color: #837386;
	}
</style>